<template>
    <view class="globe_back">
        <view class="box">
            <view v-if="lists.order_status == 0">
                <u-count-down :time="30 * 60 * 60 * 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
                    <view class="time fw_bold f_40">
                        待支付，剩余
                        <text class="time__item" style="color: #ff6401">{{ timeData.minutes }}&nbsp;</text>
                        分
                        <text class="time__item" style="color: #ff6401">{{ timeData.seconds }}&nbsp;</text>
                        秒
                    </view>
                </u-count-down>
            </view>
			<view v-if="lists.order_status == 1&&lists.rider_status==0">
			        <view class="time fw_bold f_40">
			            待接单，请耐心等待
			        </view>
			</view>
			<view v-if="lists.order_status == 1&&lists.rider_status==4">
			        <view class="time fw_bold f_40">
			            已完成，感谢您的使用
			        </view>
			</view>
			
			<view class="" v-if="lists.specifications&&lists.servicetype_id==1" style="margin-top: 50rpx;background-color: #fff;padding: 20rpx;">
				<!-- <view class="title">商品名称</view> -->
					<view class="flex">
					    <view>
					        <image class="img_add" style="" :src="lists.specifications.product_image" mode="widthFix"></image>
					    </view>
					    <view class="rightBox">
					        <view class="title">{{ lists.specifications.product_name }}</view>
							<view class="flex" style="">
							    <view class="option">规格：{{ lists.specifications.guige }}</view>
							</view>
					        
					        <view class="flex" style="">
					            <view class="money" style="padding-right: 100rpx;">￥{{ lists.specifications.money }}</view>
					        </view>
					    </view>
					</view>
				<!-- </view> -->
				<view class="flex justify_content_between align_items_center" style="padding-top: 10rpx;font-size: 28rpx;" >
					<view class="a_c">店铺地址：{{lists.specifications.address}}</view>
					<image class="img_32" src="../../static/imgs/right.png" mode=""></image>
				</view>
			</view>
            <!-- <view v-if="lists.order_status == 1" class="fw_bold f_40">待接单，请耐心等待</view> -->
            <!-- <view v-if="lists.rider_status == 4&&lists.order_status == 1" class="fw_bold f_40">已完成，感谢您的使用</view> -->
            <view class="detailedBox" v-if="lists.servicetype_id!=1">
                <view class="title">描述内容</view>
                <view class="info" v-if="lists.product_type==5">{{lists.on_site_content}}</view>
                <view class="infoImgBox">
                    <image class="infoimg" :src="item" mode="widthFix" v-for="(item,index) in lists.on_site_photos"></image>
        <!--            <image class="infoimg" src="@/static/imgs/img.png" mode="widthFix"></image>
                    <image class="infoimg" src="@/static/imgs/img.png" mode="widthFix"></image> -->
                </view>
            </view>
            <!-- 接单员 -->
            <view v-if="lists.rider_status >1" class="flex justify_content_between store">
                <view class="flex">
                    <image class="storeImg" :src="lists.order_taker.avatar" mode=""></image>
                    <view>
                        <view class="storeTitle">{{lists.order_taker.name}}</view>
                        <view class="salesVolume">
							<u-rate :count="count" v-model="lists.order_taker.star" active-color="#FF6401" inactive-color="#F7F7F7" size="16" gutter="2">
							</u-rate>
						</view>
                    </view>
                </view>
                <view>
                    <image class="address" :src="url + 'icon_dpdz.png'" mode=""></image>
                    <text class="addressText">电话联系</text>
                </view>
            </view>
            <!-- 金额 -->
            <view class="detailedBox" v-if="lists.product_type==5">
                <view class="flex justify_content_between detailed">
                    <view>服务类型</view>
                    <view>{{lists.servicetype}}</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>服务位置</view>
                    <view>{{lists.Destination.user_location}}</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>预约时间</view>
                    <view>{{lists.time.service_time}}</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>姓名</view>
                    <view>{{lists.Destination.consignee}}</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>联系电话</view>
                    <view>{{lists.Destination.mobile}}</view>
                </view>
                <view class="flex justify_content_between detailed" v-if="lists.time.servicetype_id==1">
                    <view>使用次数</view>
                    <view>{{lists.time.service_num}}次</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>是否加急</view>
                    <view v-if="lists.time.service_j==1">是</view>
					<view v-if="lists.time.service_j!=1">否</view>
                </view>
                <view class="flex justify_content_between detailed" v-if="lists.time.servicetype_id==2">
                    <view>预算报价</view>
                    <view class="fw_bold" style="color: #ff6401">￥{{lists.budget_quotation}}</view>
                </view>
            </view>
			<!-- 金额 -->
			<view class="detailedBox" v-if="lists.product_type==4">
			    <view class="flex justify_content_between detailed">
			        <view>车型</view>
			        <view>{{lists.defective_vehicle_model}}</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>车辆位置</view>
			        <view>{{lists.vehicle.trailer_address}}</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>目的地</view>
			        <view>{{lists.Destination.user_location}}</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>距离</view>
			        <view>{{lists.vehicle.km}}km</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>姓名</view>
			        <view>{{lists.Destination.consignee}}</view>
			    </view>
				<view class="flex justify_content_between detailed">
				    <view>联系电话</view>
				    <view>{{lists.Destination.mobile}}</view>
				</view>
			</view>
			<view class="detailedBox" v-if="lists.product_type==6">
			    <view class="flex justify_content_between detailed">
			        <view>开锁类型</view>
			        <view>{{lists.vehicle.trailer_address}}</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>服务位置</view>
			        <view>{{lists.Destination.user_location}}</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>姓名</view>
			        <view>{{lists.Destination.consignee}}</view>
			    </view>
				<view class="flex justify_content_between detailed">
				    <view>联系电话</view>
				    <view>{{lists.Destination.mobile}}</view>
				</view>
				<view class="flex justify_content_between detailed">
				    <view>预算报价</view>
				    <view>￥{{lists.budget_quotation}}</view>
				</view>
			</view>
            <view class="detailedBox" v-if="type == 0 && payType == 0 && lists.time.servicetype_id==1&&lists.product_type==5">
                <view class="flex justify_content_between detailed">
                    <view>订单金额</view>
                    <view>￥{{lists.money.goods_price}}</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>优惠</view>
                    <view>￥{{lists.money.coupon_price}}</view>
                </view>
                <view class="flex justify_content_between detailed">
                    <view>合计</view>
                    <view class="fw_bold" style="color: #ff6401">￥{{lists.money.order_price}}</view>
                </view>
            </view>
			<view class="detailedBox" v-if="lists.product_type==4">
			    <view class="flex justify_content_between detailed">
			        <view>拖车金额</view>
			        <view>￥{{lists.money.goods_price}}</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>优惠</view>
			        <view>￥{{lists.money.coupon_price}}</view>
			    </view>
			    <view class="flex justify_content_between detailed">
			        <view>合计</view>
			        <view class="fw_bold" style="color: #ff6401">￥{{lists.money.actual_price}}</view>
			    </view>
			</view>
        </view>
        <view style="height: 150rpx"></view>
        <!-- 底部 -->
        <view v-if="t==1" class="button flex justify_content_between">
            <view class="TotalPrice">
                <view class="f_24">
                    合计：
                    <text style="color: #ff6401; font-size: 32rpx; font-weight: bold">{{lists.money.actual_price}}</text>
                </view>
                <view v-if="type == 1" class="cl_999CA3 f_24 mt_16">
                    共2件 优惠
                    <text class="cl_00091A">￥{{lists.money.coupon_price}}</text>
                </view>
            </view>
            <view class="buy" @click="buy">立即付款</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            type: 0, //服务状态：0租用电池，1上门检修故障
            payType: 0, //支付状态：0待支付，1待接单
            count: 5,
            value: 5,
            timeData: {},
            url: '',
			id:0,
			lists:'',
			types:0,
			t:0,
			
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    onLoad(e) {
        console.log(e.type);
        // this.payType = e.type;
		this.id=e.id
		this.t=e.t
		this.list()
    },
    methods: {
        onChange(e) {
            this.timeData = e;
        },
		list(){
			this.$.ajax(1, "POST", "users/service_order", {
					order_id:this.id,
					lat:39.222,
					lng:117.333,
				}, (res) => {
					if(res.code==200){
						
						// this.$.ti_shi(res.msg)
						this.lists=res.data
						 // setTimeout(()=>{
							//  this.$emit('handleGetOrderList')
						 // },1000)
						 
					}else{
						this.$.ti_shi(res.msg)
					}
				})
		},
        buy() {
            this.$.ajax(1, "POST", "users/go_pay", {
            		order_id:this.id,
            		// lat:39.222,
            		// lng:117.333,
            	}, (res) => {
            		if(res.code==200){
            			this.$.ti_shi(res.msg)
            		
            			var that =this
            			 uni.requestPayment({
            			 	provider: "weixin",
            			 	timeStamp: res.data.timeStamp,
            			 	nonceStr: res.data.nonceStr,
            			 	package: res.data.package,
            			 	signType: res.data.signType,
            			 	paySign: res.data.paySign,
            			 	success: function (ress) {
            			 		setTimeout(() => {
            			 			uni.navigateBack({
            			 				delta:1
            			 			})
            			 		}, 1000);
            			 	},
            			 	fail: function (err) {
            			 		console.log(err)
            			 		that.$.ti_shi(err)
            			 					
            			 	}
            			 });
            			 
            		}else{
            			this.$.ti_shi(res.msg)
            		}
            	})
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 32rpx;
    .addTitle {
        font-size: 40rpx;
        color: #00091a;
        font-weight: bold;
    }
    .addText {
        font-size: 28rpx;
        color: #999ca3;
        margin-top: 16rpx;
    }
    .icon_r {
        width: 32rpx;
        height: 32rpx;
        vertical-align: middle;
        margin-top: 36rpx;
    }
    .address {
        background: white;
        border-radius: 16rpx;
        padding: 24rpx;
    }
    .coupon,
    .detailedBox {
        background: white;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-top: 24rpx;
    }
    .ProductMap {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
    }
    .couT {
        width: 30%;
        margin: 16rpx 0;
        color: #333a47;
        font-size: 28rpx;
    }
    .coutext {
        width: 70%;
        padding: 16rpx 0;
        font-size: 28rpx;
        color: #ccced1;
    }
    .couponIcon {
        width: 32rpx;
        height: 32rpx;
        vertical-align: middle;
    }
    .detailed {
        color: #333a47;
        font-size: 28rpx;
        margin-bottom: 32rpx;
    }
}
.button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16rpx 32rpx;
    background: #ffffff;
    .buy {
        width: 176rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
        color: white;
        border-radius: 8rpx;
        background-image: linear-gradient(to right, #ff924d, #ff6401);
    }
}
.title {
    font-size: 28rpx;
    color: #333a47;
}
.info {
    font-size: 28rpx;
    color: #00091a;
    margin-top: 32rpx;
}
.infoimg {
    width: 140rpx;
    height: 140rpx;
    border-radius: 16rpx;
    margin: 24rpx 12rpx;
}
.store {
    padding: 24rpx;
    background: white;
    border-radius: 24rpx;
    margin-top: 30rpx;
}
.storeImg {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
    margin-right: 16rpx;
}
.storeTitle {
    color: #00091a;
    font-size: 32rpx;
    margin-bottom: 8rpx;
}
.address {
    width: 48rpx;
    height: 48rpx;
    display: block;
    margin: 0 auto;
}
.addressText {
    color: #999ca3;
    font-size: 24rpx;
}
.salesVolume {
    color: #999ca3;
    font-size: 28rpx;
}
.img_add {
        width: 140rpx;
        height: 140rpx;
    }
	.back {
		width: 638rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		margin-left: 32rpx;
	}
	.a {
		display: flex;
		/* justify-content: space-between; */
	}
	.a_b {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.a_but {
		padding: 8rpx 16rpx;
		background-color: #F7FAFF;
	}
	
	.a_c {
		width: 598rpx;
		display: block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.a_xian {
		width: 478rpx;
		padding-bottom: 18rpx;
		border-bottom: 2rpx solid #F7FAFF;
		/* margin-top: 10rpx; */
	}
	
	.a_d {
		width: 526rpx;
		height: 336rpx;
		background: #F7FAFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 32rpx 56rpx;
	}

     .productMap {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8rpx;
	  }
	  .rightBox {
	      width: 70%;
	  }
	  .title {
	      width: 100%;
	      font-size: 32rpx;
	      color: #00091a;
	      font-weight: bold;
	      display: block;
	      white-space: nowrap;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      margin-left: 16rpx;
	  }
	  .option {
	      color: #999ca3;
	      font-size: 24rpx;
	      background: #f7faff;
	      padding: 16rpx;
	      border-radius: 16rpx;
	      display: inline-block;
	      margin-left: 16rpx;
	      margin-top: 16rpx;
	  }
	  .money {
	      color: #ff6401;
	      font-size: 32rpx;
	      margin-left: 16rpx;
	      margin-top: 16rpx;
	  
	  }
</style>
